import React, { useState, useEffect } from 'react';
import { Drawer, List, Avatar, Badge, Tabs, Button, Empty, Spin, Typography, Tag, Space } from 'antd';
import { BellOutlined, CheckOutlined, DeleteOutlined, UserOutlined, FileTextOutlined, SettingOutlined, ClockCircleOutlined } from '@ant-design/icons';

const { Text } = Typography;

interface NotificationItem {
  id: string;
  title: string;
  content: string;
  time: string;
  type: 'system' | 'document' | 'user';
  status: 'read' | 'unread';
}

const mockNotifications: NotificationItem[] = [
  {
    id: '1',
    title: '系统更新',
    content: '系统已更新至最新版本，包含多项功能优化与错误修复。',
    time: '2023-10-20 10:30',
    type: 'system',
    status: 'unread',
  },
  {
    id: '2',
    title: '文档分享',
    content: '用户"张三"与您分享了文档"项目计划书.docx"',
    time: '2023-10-19 15:45',
    type: 'document',
    status: 'unread',
  },
  {
    id: '3',
    title: '权限变更',
    content: '您已被授予"项目管理"模块的编辑权限',
    time: '2023-10-18 09:20',
    type: 'system',
    status: 'read',
  },
  {
    id: '4',
    title: '用户评论',
    content: '用户"李四"评论了您的文档"研究报告.pdf"',
    time: '2023-10-17 16:30',
    type: 'user',
    status: 'read',
  },
];

const Notifications: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [notifications, setNotifications] = useState<NotificationItem[]>(mockNotifications);
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('all');
  
  const unreadCount = notifications.filter(n => n.status === 'unread').length;
  
  const showDrawer = () => {
    setVisible(true);
    loadNotifications();
  };
  
  const closeDrawer = () => {
    setVisible(false);
  };
  
  const loadNotifications = () => {
    setLoading(true);
    // 模拟API请求
    setTimeout(() => {
      setNotifications(mockNotifications);
      setLoading(false);
    }, 500);
  };
  
  const markAsRead = (id: string) => {
    setNotifications(prev => 
      prev.map(note => 
        note.id === id ? { ...note, status: 'read' } : note
      )
    );
  };
  
  const markAllAsRead = () => {
    setNotifications(prev => 
      prev.map(note => ({ ...note, status: 'read' }))
    );
  };
  
  const deleteNotification = (id: string) => {
    setNotifications(prev => prev.filter(note => note.id !== id));
  };
  
  const clearAllNotifications = () => {
    setNotifications([]);
  };
  
  // 根据通知类型获取图标
  const getNotificationIcon = (type: string) => {
    switch (type) {
      case 'system':
        return <SettingOutlined style={{ color: '#1890ff' }} />;
      case 'document':
        return <FileTextOutlined style={{ color: '#52c41a' }} />;
      case 'user':
        return <UserOutlined style={{ color: '#faad14' }} />;
      default:
        return <BellOutlined />;
    }
  };
  
  // 过滤通知
  const filteredNotifications = activeTab === 'all' 
    ? notifications 
    : activeTab === 'unread' 
      ? notifications.filter(n => n.status === 'unread')
      : notifications.filter(n => n.type === activeTab);
  
  return (
    <>
      <Badge count={unreadCount} size="small">
        <Button 
          type="text" 
          icon={<BellOutlined />} 
          onClick={showDrawer}
          aria-label="通知"
        />
      </Badge>
      
      <Drawer
        title="通知"
        placement="right"
        onClose={closeDrawer}
        open={visible}
        width={400}
        extra={
          <Space>
            {unreadCount > 0 && (
              <Button 
                type="text" 
                icon={<CheckOutlined />} 
                onClick={markAllAsRead}
              >
                全部已读
              </Button>
            )}
            {notifications.length > 0 && (
              <Button 
                type="text" 
                danger
                icon={<DeleteOutlined />} 
                onClick={clearAllNotifications}
              >
                清空
              </Button>
            )}
          </Space>
        }
      >
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          items={[
            {
              key: 'all',
              label: '全部',
              children: (
                <></>
              )
            },
            {
              key: 'unread',
              label: `未读 (${unreadCount})`,
              children: (
                <></>
              )
            },
            {
              key: 'system',
              label: '系统',
              children: (
                <></>
              )
            },
            {
              key: 'document',
              label: '文档',
              children: (
                <></>
              )
            },
            {
              key: 'user',
              label: '用户',
              children: (
                <></>
              )
            },
          ]}
        />
        
        {loading ? (
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <Spin />
          </div>
        ) : filteredNotifications.length === 0 ? (
          <Empty 
            description="暂无通知" 
            image={Empty.PRESENTED_IMAGE_SIMPLE} 
            style={{ margin: '40px 0' }}
          />
        ) : (
          <List
            itemLayout="horizontal"
            dataSource={filteredNotifications}
            renderItem={item => (
              <List.Item
                actions={[
                  <Button 
                    type="text" 
                    key="read" 
                    onClick={() => markAsRead(item.id)}
                    disabled={item.status === 'read'}
                  >
                    {item.status === 'unread' ? '标记已读' : '已读'}
                  </Button>,
                  <Button 
                    type="text" 
                    key="delete" 
                    danger
                    onClick={() => deleteNotification(item.id)}
                  >
                    删除
                  </Button>
                ]}
              >
                <List.Item.Meta
                  avatar={
                    <Avatar 
                      icon={getNotificationIcon(item.type)} 
                      style={{ 
                        backgroundColor: item.status === 'unread' ? '#e6f7ff' : '#f0f0f0' 
                      }} 
                    />
                  }
                  title={
                    <Space>
                      <Text strong={item.status === 'unread'}>{item.title}</Text>
                      {item.status === 'unread' && <Badge status="processing" />}
                    </Space>
                  }
                  description={
                    <>
                      <div>{item.content}</div>
                      <div style={{ marginTop: 4 }}>
                        <ClockCircleOutlined style={{ fontSize: 12, marginRight: 4 }} />
                        <Text type="secondary" style={{ fontSize: 12 }}>{item.time}</Text>
                      </div>
                    </>
                  }
                />
              </List.Item>
            )}
          />
        )}
      </Drawer>
    </>
  );
};

export default Notifications; 